import React,{useState} from 'react'
import { Cell, Image ,Button,ProductCard,Popup,Input,Toast} from 'react-vant'
import { useNavigate } from 'react-router-dom';
export default function Hui(props) {
  let navigate = useNavigate()
  const [isVisible, setIsVisible] = useState(false)
  let [text,setText]=useState('')
  let fasong = async() => {
    setIsVisible(false)
    Toast.success('回复成功')
  }
  return (
    <div style={{marginTop:'30px'}}> 
                        <Cell
                        center
                        title={`${props.item.name}`}
                        label={props.item.time}
                        icon={<Image width={40} height={40} src='/1.png' round />}
                        isLink={false}
                      >
                        <Button type='default' round size='small'
                        onClick={() => setIsVisible(true)}>回复</Button>
                      </Cell>
                      <p style={{marginLeft:'20px'}}>{props.item.zp.ping}</p>
                      <ProductCard
                      onClick={() => { navigate('/pxg') }} 
                      price={props.item.zp.price}
                      title={props.item.zp.title}
                      desc={props.item.zp.cont}
                      thumb="../1.png"
                    />
                <Popup
                visible={isVisible}
                style={{ height: '40%' }}
                position='bottom'
                round
                onClose={() => setIsVisible(false)}>
                  <Cell>
                    <Input
                      prefix="💁"
                      value={text}
                      onChange={(e) => {setText(e)}}
                      suffix={<Button size="small" type="primary"
                      onClick={() => {fasong()}}>发送</Button>}
                      placeholder="请输入回复内容"
                    />
                  </Cell>
                </Popup>
    </div>
  )
}

